<style scoped>
    /* cart */
    .page-wrap.page-cart  { background: #F4F4F4; font-size: 0.14rem; min-height: calc(100% - 0.4rem); min-height: -webkit-calc(100% - 0.4rem) }
    .page-cart .m-cart { padding: 0 0 1.05rem; line-height: 2; }
    .page-cart .m-cart a { color: #222; }
    .page-cart .m-cart .item { position: relative; padding: 0.15rem 0.2rem; overflow: hidden; border-bottom: 1px solid #D5D5D5; background: #fff; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s; }
    .page-cart .m-cart .item.destroy { opacity: 0; padding-top: 0; padding-bottom: 0; height: 0px; }
    .page-cart .m-cart .item .pic { position: absolute; left: 0.2rem; top: 50%; transform: translateY(-50%); width: 0.64rem; }
    .page-cart .m-cart .item .pic img { width: 100%; }
    .page-cart .m-cart .item .text { padding-left: 0.8rem; }
    .page-cart .m-cart .item .title { white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; color: #666; }
    .page-cart .m-cart .item .remain { color: #2A96FF; }
    .page-cart .m-cart .item .del { position: absolute; right: 0.2rem; top: 0.62rem; overflow: hidden; }
    .page-cart .m-cart .item .pro-number { margin-left: 0.05rem; }
    .page-cart .m-cart .item .pro-number-input { width: 2em; }
    .page-cart .m-cart .empty { text-align: center; padding-top: 1rem; }
    .page-cart .m-cart .empty a { color: #39f }
    .page-cart .m-cart .hint { margin-top: 0.1rem; background: #fffca9; color: #f60; padding: 0 0.1rem; line-height: 1.6; }
    .page-cart .embed .m-cart { padding-top: 0; }
    .page-cart .embed .m-simpleHeader { display: none }
</style>
<template>
    <header-component keep-alive :page-name="pageName"></header-component>
    <nav-component keep-alive :numprops="cartNum"></nav-component>


    <div id="page-cart" class="page-wrap page-cart">
        <div class="m-cart" id="cartList">


            <div class="item" track-by="$index" v-for="item in cartDataTrue">
                <div class="pic ">
                    <a href="javascript:;"><img :src="item.img"></a>
                </div>
                <div class="text">
                    <h1 class="title"><a href="javascript:;" v-link="{path:'/detail',query:{id:item.id}}" data-href="?c=detail&amp;id={{item.id}}">{{item.goodsName}}</a></h1>
                    <div>总需 {{item.totalNeed}} 人次，剩余 <em class="remain">{{item.surplus}}</em> 人次</div>
                    <div>参与人次
                        <div class="w-number" data-cartitem="{{item.id}}">
                            <input :disabled="item.islimit!=0?true:!!item.isTen?true:false" type="number" class="w-number-input" v-model="selected[$index]"  pattern="[0-9]*"  data-pattern="[0-9]*" :data-min="item.islimit==1?item.limit:item.isTen==1?10:1" :data-max="item.islimit==1?item.limit:item.surplus" @change="changeInput($event,$index)"/>
                            <a class="w-number-btn w-number-btn-plus" href="javascript:;" :data-change="!!item.isTen?10:1" @click="changeNum(!!item.isTen?10:1,$index,$event)" :data-min="item.islimit==1?item.limit:item.isTen==1?10:1" :data-max="item.islimit==1?item.limit:item.surplus">+</a>
                            <a class="w-number-btn w-number-btn-minus" href="javascript:;" :data-change="!!item.isTen?-10:-1" @click="changeNum(!!item.isTen?-10:-1,$index,$event)" :data-min="item.islimit==1?item.limit:item.isTen==1?10:1" :data-max="item.islimit==1?item.limit:item.surplus">-</a>
                        </div>
                    </div>
                    <a href="javascript:;" class="del" @click="removeItem(item.id,$index)"><i class="ico ico-del"></i></a>
                </div>
            </div>
            <div class="empty" v-if="!this.goodsNum">您的清单里还没有任何商品，<a href="javascript:;" v-link="{path:'/home'}" data-href="./">马上去逛逛~</a></div>
        </div>
        <div class="m-simpleFooter m_footerBottom">

            <div class="m-simpleFooter-text">共参与<span data-fn="cartGoodsNum">{{goodsNum}}</span>件商品，总计：<em class="txt-red"><span data-fn="cartTotal">{{totalPrice}}</span>拼宝币</em></div>
            <div class="m-simpleFooter-ext">
                <a href="javascript:;" :class="['w-button w-button-main',{'w-button-disabled': goodsNum==0 }]"  v-link="{path:'/pay'}" data-href="?c=pay">提交</a>
            </div>
        </div>
    </div>
    <pop :status-pop="statusPop" :status-toast="statusToast" :msg="msg" :delay="delay">
        <a href="javascript:;" @click="statusPop=false">确定</a>
    </pop>

</template>

<script>
    import headerComponent from '../components/header'
    import navComponent from '../components/nav'
    import pop from '../components/pop'
    import Cart from '../module/cart'
    import User from '../module/user'
//    import Config from '../config/config'
    import Request from '../config/request'
    export default {
        filters: {

        },
        directives: {

        },
        data () {
            return {
                cartData: [],
                cartDataTrue: [],
                selected:[], //商品个数数组
                goodsNum: 0,
                cartNum: 0,
                goodsForbid: 0,  //   失效的商品数目
                statusPop: false,
                statusToast: false,
                delay:2000,
                msg:'',  //弹窗文案
                pageName:'购物车'
            }
        },
        watch:{

        },
        created(){
            this.$dispatch('isLoading',true);
            this.cartInit();
        },
        async ready () {
            await this.getList();
            this.$dispatch('isLoading',false);
        },

        components:{

            headerComponent,
            navComponent,
            pop
        },
        computed:{
            totalPrice(){
                let all=0;
                this.selected.forEach((item)=>{
                    all+=Number.parseInt(item);
                })
                return all;
            }
        },
        methods: {
            changeInput(e,index){
                let [max,min,val]=[Number.parseInt(e.target.dataset.max),Number.parseInt(e.target.dataset.min),Number.parseInt(e.target.value)];
                if(val>max)
                   this.selected.$set(index,max)
                else if(val<min)
                    this.selected.$set(index,min)
                else if(!val)
                    this.selected.$set(index,1)

                this.$nextTick(()=>{
                    Cart.formatList({item:this.cartDataTrue,goodsNum:this.goodsNum,total:this.totalPrice,selected:this.selected})
            })
            },
            changeNum(num,index,e){

                let [max,min,number,currentCount]=[Number.parseInt(e.target.dataset.max),Number.parseInt(e.target.dataset.min),Number.parseInt(num),Number.parseInt(this.selected[index])];

                if(currentCount+number>max)
                    this.selected.$set(index,max);
                else if(currentCount+number<min)
                    this.selected.$set(index,min);
                else
                    this.selected.$set(index,currentCount+number);

                this.$nextTick(()=>{
                    Cart.formatList({item:this.cartDataTrue,goodsNum:this.goodsNum,total:this.totalPrice,selected:this.selected})
                })
            },
            cartInit(){
                this.cartData = Cart.cartObj;
                this.goodsNum = this.cartDataTrue.length;
                this.cartNum = this.goodsNum;
                this.selected.splice(0,this.selected.length);
                this.cartDataTrue.forEach((item)=>{
                    this.selected.push(item.number);
                })
                console.log(this.selected)
            },
            removeItem(id,index){
                this.total-=this.cartDataTrue[index].number;
                this.cartDataTrue.splice(index,1);
                this.$nextTick(()=>{
                    Cart.removeItem(id);
                })
                this.cartInit();
            },

            async getList() {

                if (Cart.idList.length == 0) {
                    return {
                        "status": 200,
                        "msg": "",
                        "data": {}
                    };
                }

                let res= await Request.post(Config.apiDomain + '/Cart/listCart?token='+User.token,{data:{idstr: Cart.idList.join(',')}});
                console.log(res);


                if (res.status == 200) {

                    if (res.data && res.data.item) {

                        this.cartDataTrue.splice(0,this.cartDataTrue.length);


                        this.cartDataTrue.push(...res.data.item);

                        this.goodsForbid = res.data.forbidden_balances;
                        this.goodsNum= this.getPropertyCount(res.data.item);

                        Cart.formatList(res.data);
                        this.goodsNum=res.data.goodsNum;

                    }else{
                        Cart.clear();
                    }

                }else if(res.status == 401){
                    this.statusPop = true;
                    this.msg = res.msg;
                    Cart.clear();
                    res.status=200;

                }else {
                    this.statusPop = true;
                    this.msg = res.msg
                }
                this.cartInit();
            },

            getPropertyCount(o){
                var n, count = 0;
                for(n in o){
                    if(o.hasOwnProperty(n)){
                        count++;
                    }
                }
                return count;
            }
        }
    }
</script>
